<%= bootstrap_form_tag remote: true, url: experiment_contents_project_reports_path(project, format: :json), method: :post, html: { id: "add-contents-form" } do |f| %>
  <%= hidden_field_tag :id, experiment.id %>
  <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#tasks-tab" aria-controls="tasks-tab" role="tab" data-toggle="tab">
          <span class="fas fa-credit-card visible-xs"></span>
          <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></span>
        </a>
      </li>
      <li role="presentation">
        <a href="#content-tab" aria-controls="content-tab" role="tab" data-toggle="tab">
          <span class="fas fa-link visible-xs"></span>
          <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></span>
        </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="tasks-tab">
        <h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></h5>
        <%= render partial: "reports/new/modal/experiment_contents_inner.html.erb", locals: { form: f, experiment: experiment } %>
      </div>
      <div role="tabpanel" class="tab-pane" id="content-tab">
        <h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></h5>
        <%= render partial: "reports/new/modal/module_contents_inner.html.erb", locals: { form: f } %>
        <hr>
        <%= render partial: "reports/new/modal/step_contents_inner.html.erb", locals: { form: f } %>
        <hr>
        <%= render partial: "reports/new/modal/result_contents_inner.html.erb", locals: { form: f } %>
      </div>
    </div>
  </div>
<% end %>
